<template>
  <!-- 音乐播放器详情页 -->
  <div class="musicPlayer">
    <!-- 背景模糊效果 -->
    <img 
      :src="musicList.al.picUrl" 
      alt="专辑封面背景" 
      class="bgimg"
      @error="handleImageError"
    >
    
    <!-- 顶部导航栏 -->
    <div class="detailTop">
      <div class="detailTopLeft">
        <!-- 返回按钮 -->
        <button 
          class="backButton"
          @click="backHome"
          aria-label="返回"
        >
          <svg class="icon">
            <use xlink:href="#icon-zuojiantou"></use>
          </svg>
        </button>
        
        <!-- 歌曲信息跑马灯 -->
        <div class="marqueeContainer">
          <Vue3Marquee class="songTitle">
            {{ musicList.al.name }}
          </Vue3Marquee>
          <div class="artistList">
            <span 
              v-for="(artist, index) in musicList.ar" 
              :key="artist.id"
              class="artistItem"
            >
              {{ artist.name }}{{ index < musicList.ar.length-1 ? ' / ' : '' }}
            </span>
          </div>
        </div>
      </div>

      <!-- 分享按钮 -->
      <button class="shareButton" aria-label="分享">
        <svg class="icon">
          <use xlink:href="#icon-fenxiang"></use>
        </svg>
      </button>
    </div>

    <!-- 唱片机主体 -->
    <div class="playerBody" v-show="!isLyricShow">
      <!-- 唱片机指针 -->
      <img
        src="@/assets/needle-ab.png"
        alt="唱片机指针"
        class="needle"
        :class="{ 'needle-active': isPlaying }"
      />

      <!-- 唱片底盘 -->
      <img 
        src="@/assets/cd.png" 
        alt="唱片底盘" 
        class="discBase"
      />

      <!-- 旋转唱片 -->
      <img
        :src="musicList.al.picUrl"
        alt="专辑封面"
        class="discCover"
        @click="toggleLyricView"
        :class="{ 
          'discCover-rotating': isPlaying,
          'discCover-paused': !isPlaying
        }"
      />
    </div>

    <!-- 歌词显示区域 -->
    <div 
      class="lyricContainer" 
      ref="lyricScroll"
      v-show="isLyricShow"
    >
      <transition-group name="lyric-line">
        <p
          v-for="line in processedLyrics"
          :key="line.time"
          :class="{ 
            'active-lyric': isCurrentLyric(line),
            'passed-lyric': isPassedLyric(line)
          }"
        >
          {{ line.lrc }}
        </p>
      </transition-group>
    </div>

    <!-- 播放控制底部栏 -->
    <div class="controlBar">
      <!-- 交互操作区 -->
      <div class="quickActions">
        <button class="actionButton" aria-label="喜欢">
          <svg class="icon">
            <use xlink:href="#icon-aixin"></use>
          </svg>
        </button>
        <button class="actionButton" aria-label="下载">
          <svg class="icon">
            <use xlink:href="#icon-iconfontzhizuobiaozhun023146"></use>
          </svg>
        </button>
        <button class="actionButton" aria-label="唱片模式">
          <svg class="icon">
            <use xlink:href="#icon-yinlechangpian"></use>
          </svg>
        </button>
        <button class="actionButton" aria-label="评论">
          <svg class="icon">
            <use xlink:href="#icon-iconfontzhizuobiaozhun023110"></use>
          </svg>
        </button>
        <button class="actionButton" aria-label="播放列表">
          <svg class="icon">
            <use xlink:href="#icon-liebiao-"></use>
          </svg>
        </button>
      </div>

      <!-- 进度条 -->
      <div class="progressControl">
        <input 
          type="range" 
          class="progressBar"
          min="0"
          :max="duration"
          v-model="currentTime"
          step="0.05"
          @input="handleSeek"
        >
      </div>

      <!-- 播放控制 -->
      <div class="playbackControls">
        <button class="controlButton" aria-label="播放模式">
          <svg class="icon">
            <use xlink:href="#icon-xunhuan"></use>
          </svg>
        </button>
        
        <button 
          class="controlButton"
          @click="changeTrack(-1)"
          aria-label="上一首"
        >
          <svg class="icon">
            <use xlink:href="#icon-shangyishoushangyige"></use>
          </svg>
        </button>

        <!-- 播放/暂停主按钮 -->
        <button 
          class="playPauseButton"
          @click="togglePlayback"
          aria-label="播放暂停"
        >
          <svg class="icon" v-if="isPlaying">
            <use xlink:href="#icon-zanting"></use>
          </svg>
          <svg class="icon" v-else>
            <use xlink:href="#icon-bofang1"></use>
          </svg>
        </button>

        <button 
          class="controlButton"
          @click="changeTrack(1)"
          aria-label="下一首"
        >
          <svg class="icon">
            <use xlink:href="#icon-xiayigexiayishou"></use>
          </svg>
        </button>
        
        <button class="controlButton" aria-label="音量控制">
          <svg class="icon">
            <use xlink:href="#icon-zu"></use>
          </svg>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { Vue3Marquee } from "vue3-marquee";
import { mapMutations, mapState } from "vuex";


export default {
  props: {
    musicList: {
      type: Object,
      required: true,
      validator: (value) => {
        return [
          'al.picUrl',
          'ar',
          'al.name'
        ].every(path => path.split('.').reduce((obj, key) => obj?.[key], value))
      }
    },
    isPlaying: Boolean,
    addDuration: Function
  },

  components: { Vue3Marquee },

  data: () => ({
    isLyricShow: false,
    seekPosition: 0
  }),

  computed: {
    ...mapState([
      'lyricList', 
      'currentTime', 
      'playListIndex', 
      'playList',
      'duration'
    ]),

    // 处理后的歌词数据
    processedLyrics() {
      return lyricParser(this.lyricList.lyric || '')
    },

    // 艺术家列表显示
    formattedArtists() {
      return this.musicList.ar?.map(a => a.name).join(' / ') || '未知艺术家'
    }
  },

  watch: {
    currentTime(newTime) {
      this.handleLyricScroll(newTime)
      this.handleAutoPlayNext()
    }
  },

  methods: {
    ...mapMutations([
      'updateDetailShow', 
      'updatePlayListIndex',
      'seekToPosition'
    ]),

    // 切换播放状态
    togglePlayback() {
      this.$emit('toggle-playback')
    },

    // 处理歌词滚动
    handleLyricScroll(time) {
      const activeLine = this.$refs.lyricScroll?.querySelector('.active-lyric')
      if (!activeLine) return

      const container = this.$refs.lyricScroll
      const lineTop = activeLine.offsetTop
      const containerHeight = container.clientHeight
      
      if (lineTop > containerHeight / 2) {
        container.scrollTo({
          top: lineTop - containerHeight / 2,
          behavior: 'smooth'
        })
      }
    },

    // 自动播放下一首
    handleAutoPlayNext() {
      if (Math.abs(this.currentTime - this.duration) < 0.1) {
        const nextIndex = this.playListIndex === this.playList.length - 1 
          ? 0 
          : this.playListIndex + 1
        
        this.updatePlayListIndex(nextIndex)
        this.$nextTick(() => this.togglePlayback())
      }
    },

    // 切换歌词/封面视图
    toggleLyricView() {
      this.isLyricShow = !this.isLyricShow
      if (this.isLyricShow) {
        this.$nextTick(this.scrollToCurrentLyric)
      }
    },

    // 进度条拖动处理
    handleSeek(event) {
      this.seekToPosition(parseFloat(event.target.value))
    },

    // 图片加载失败处理
    handleImageError(event) {
      event.target.src = '/default-album-cover.jpg'
    },

    // 判断当前歌词行
    isCurrentLyric(line) {
      return this.currentTime * 1000 >= line.time && 
             this.currentTime * 1000 < line.pre
    },

    // 已播放歌词样式
    isPassedLyric(line) {
      return this.currentTime * 1000 >= line.pre
    }
  }
}
</script>
<style lang="less" scoped>
.bgimg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  filter: blur(70px);
}
.detailTop {
  width: 100%;
  height: 1rem;
  display: flex;
  padding: 0.2rem;
  justify-content: space-between;
  align-items: center;
  fill: #fff;
  .detailTopLeft {
    display: flex;
    align-items: center;
    .leftMarquee {
      width: 3rem;
      height: 100%;
      margin-left: 0.4rem;
      span {
        color: #999;
      }
      .icon {
        width: 0.3rem;
        height: 0.3rem;
        fill: #999;
      }
    }
  }
}
.detailContent {
  width: 100%;
  height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .img_needle {
    width: 2rem;
    height: 3rem;
    position: absolute;
    left: 46%;
    transform-origin: 0 0;
    transform: rotate(-13deg);
    transition: all 2s;
  }
  .img_needle_active {
    width: 2rem;
    height: 3rem;
    position: absolute;
    left: 46%;
    transform-origin: 0 0;
    transform: rotate(0deg);
    transition: all 2s;
  }

  .img_cd {
    width: 5rem;
    height: 5rem;
    position: absolute;
    bottom: 2.3rem;
    z-index: -1;
  }
  .img_ar {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    position: absolute;
    bottom: 3.14rem;
    animation: rotate_ar 10s linear infinite;
  }
  .img_ar_active {
    animation-play-state: running;
  }
  .img_ar_pauesd {
    animation-play-state: paused;
  }
  @keyframes rotate_ar {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
}
.musicLyric {
  width: 100%;
  height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.2rem;
  overflow: scroll;
  p {
    color: rgb(190, 181, 181);
    margin-bottom: 0.3rem;
  }
  .active {
    color: #fff;
    font-size: 0.5rem;
  }
}
.detailFooter {
  width: 100%;
  height: 3rem;
  position: absolute;
  bottom: 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .footerTop {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .icon {
      width: 0.36rem;
      height: 0.36rem;
      fill: rgb(245, 234, 234);
    }
    .icon {
      width: 0.6rem;
      height: 0.6rem;
    }
  }
  .range {
    width: 100%;
    height: 0.06rem;
  }
  .footer {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .icon {
      fill: rgb(245, 234, 234);
    }
    .bofang {
      width: 1rem;
      height: 1rem;
    }
  }
}
</style>